<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简历分析 - SimpleHire</title>
  <link th:href="@{/webjars/bootstrap/5.3.0/css/bootstrap.min.css}" rel="stylesheet">
  <style>
    .container {
        max-width: 800px;
        margin-top: 30px;
    }
    .card {
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .form-group {
        margin-bottom: 1.5rem;
    }
    .model-selector {
        margin-bottom: 1.5rem;
    }
    .help-text {
        font-size: 0.9rem;
        color: #6c757d;
    }
  </style>
</head>
<body>
<div th:replace="fragments/header :: header"></div>

<div class="container">
  <div class="card">
    <div class="card-header bg-primary text-white">
      <h3>AI简历分析</h3>
    </div>
    <div class="card-body">
      <!-- 错误提示 -->
      <div th:if="${error}" class="alert alert-danger" role="alert">
        [[${error}]]
      </div>

      <!-- 分析表单 - 添加CSRF令牌解决403问题 -->
      <form method="post" action="/interview/analyze" enctype="multipart/form-data">
        <!-- 关键修复：添加CSRF令牌隐藏字段 -->
        <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />

        <!-- AI模型选择下拉框 -->
        <div class="model-selector">
          <label for="aiModel" class="form-label fw-bold">选择AI模型：</label>
          <select class="form-select" id="aiModel" name="model" required>
            <option th:each="model : ${models}"
                    th:value="${model}"
                    th:text="${model}"
                    th:selected="${model == defaultModel}">
            </option>
          </select>
          <div class="help-text">
            选择用于分析简历的AI模型，不同模型可能生成不同风格的面试问题和建议
          </div>
        </div>

        <!-- 简历上传 -->
        <div class="form-group">
          <label for="resumeFile" class="form-label fw-bold">上传简历（PDF格式）：</label>
          <input type="file" class="form-control" id="resumeFile" name="resumeFile" accept=".pdf">
          <div class="help-text">
            支持PDF格式文件，最大10MB。或直接在下方输入简历文本
          </div>
        </div>

        <!-- 简历文本输入 -->
        <div class="form-group">
          <label for="resumeText" class="form-label fw-bold">或输入简历文本：</label>
          <textarea class="form-control" id="resumeText" name="resumeText" rows="8"
                    placeholder="请粘贴简历文本内容..."></textarea>
        </div>

        <!-- 提交按钮 -->
        <button type="submit" class="btn btn-primary">
          <i class="bi bi-search"></i> 开始AI分析
        </button>
        <a href="/dashboard" class="btn btn-secondary ms-2">返回</a>
      </form>
    </div>
  </div>
</div>

<div th:replace="fragments/footer :: footer"></div>

<script th:src="@{/webjars/bootstrap/5.3.0/js/bootstrap.bundle.min.js}"></script>
<script>
  // 表单验证：确保至少选择文件或输入文本
  document.querySelector('form').addEventListener('submit', function(e) {
      const fileInput = document.getElementById('resumeFile');
      const textInput = document.getElementById('resumeText');

      // 检查文件是否为空且文本是否为空
      if ((fileInput.files.length === 0) && (textInput.value.trim() === '')) {
          e.preventDefault();
          alert('请上传简历文件或输入简历文本');
          return false;
      }
      return true;
  });
</script>
</body>
</html>
